<template>
  <div class="pane">
    <div>
      <div>
        历史最佳获取分数: <span>{{ bestScore }}</span>
      </div>
      <div>
        获取分数: <span>{{ score }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from "vue";
const props = defineProps({
  score: {
    Type: Number,
    default: 0,
  },
});
const bestScore = computed(() => {
  return localStorage.getItem("snackBestScore") || 0;
});
</script>

<style lang="scss" scoped>
.pane {
  width: 200px;
  height: 60px;
  background-color: rgba($color: #fff, $alpha: 0.7);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15%;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  & div {
    margin: 6px 0;
    color: #666;
    font-size: 14px;
  }
}
</style>
